<template>
  <div style="width: 100%;height: 100vh;color:var(--color-neutral-10);margin: 0 auto">
    <div style="padding: 40px 0 0 0;margin: 0 auto;max-width: 1550px;width: 90%;">
      <p style="font-size: 24px;font-weight: bold;margin-bottom: 20px">一分一段表管理</p>
    </div>
    <div style="width: 100%;height: calc(100% - 96px);position: relative;overflow-y: auto;">
      <div style="width: 90%;height: 100%;margin: 0 auto;max-width: 1550px;">
        <div style="margin-bottom: 20px;width: 100%;position: relative">
          <v-btn :disabled="data.loading" style="margin-right: 10px" variant="text"
                 @click="data.currentDisplay=0;getTable()"
                 :style="{
            backgroundColor:data.currentDisplay==0?'var(--color-neutral-3)':'unset'
          }"
          >今年</v-btn>
          <v-btn :disabled="data.loading" style="margin-right: 10px" variant="text"
                 @click="data.currentDisplay=1;getTable()"
                 :style="{
            backgroundColor:data.currentDisplay==1?'var(--color-neutral-3)':'unset'
          }"
          >前1年</v-btn>
          <v-btn :disabled="data.loading" style="margin-right: 10px" variant="text"
                 @click="data.currentDisplay=2;getTable()"
          :style="{
            backgroundColor:data.currentDisplay==2?'var(--color-neutral-3)':'unset'
          }"
          >前2年</v-btn>
          <v-btn :disabled="data.loading" style="margin-right: 10px" variant="text"
                 @click="data.currentDisplay=3;getTable()"
          :style="{
            backgroundColor:data.currentDisplay==3?'var(--color-neutral-3)':'unset'
          }"
          >前3年</v-btn>
          <a-select :disabled="data.loading" @change="selectProvinceChanged" v-model="data.selectedProvinceName" style="width:180px;height: 36px;margin-right: 5px;position: relative;top: 1px" placeholder="省份">
            <a-option v-for="item in data.provinceTypes">{{ item.name }}</a-option>
          </a-select>
          <a-select :disabled="data.loading" v-model="data.selectedProvinceSelectedTypeName" style="width:180px;height: 36px;margin-right: 5px;position: relative;top: 1px" placeholder="类别">
            <a-option v-for="item in data.selectedProvinceType">{{ item.name }}</a-option>
          </a-select>
          <v-btn :loading="data.loading" style="margin-right: 10px" variant="text"
                 @click="getTable"
          >刷新</v-btn>
          <a-trigger trigger="click" :unmount-on-close="false">
            <v-btn :disabled="data.loading" style="margin-right: 10px" variant="text"

            >导入</v-btn>
            <template #content>
              <div style="padding: 20px 20px;border-radius: 10px;background-color: var(--color-neutral-1);box-shadow: 0 4px 10px rgba(0,0,0,0.1);max-width: 300px">
                <p style="color: var(--color-neutral-10)">选择的表格文件的第一张工作表应包含导入数据，并且工作表从A1单元格到J1单元格的内容应依次为：省份、类型、年份、分数、位次、批次、当前分数人数、位次范围、批次分数线、当前总人数。</p>
                <a-upload @success="imported" :action="appData.serverURL + '/bg/scoreRank/import'"></a-upload>
              </div>
            </template>
          </a-trigger>
          <v-btn :disabled="data.loading" style="margin-right: 0px" variant="text"
            @click="deleteAllTable"
          >清空全部表</v-btn>
          <v-btn :disabled="data.loading" style="margin-right: 0px" variant="text"
            @click="deleteCurrentTable"
          >清空当前表</v-btn>
        </div>
        <a-table :loading="data.loading" style="width: 100%;margin-bottom: 40px;" :columns="[
            {
              dataIndex:'province',
              title:'省份'
            },
            {
              dataIndex:'type',
              title:'种类'
            },
            {
              dataIndex:'yearSub',
              title:'年份差'
            },
            {
              dataIndex:'score',
              title:'分数'
            },
            {
              dataIndex:'ranks',
              title:'位次'
            },
            {
              dataIndex:'batch',
              title:'批次'
            },
            {
              dataIndex:'num',
              title:'当前分数人数'
            },
            {
              dataIndex:'rankRange',
              title:'位次区间'
            },
            {
              dataIndex:'controlScore',
              title:'批次分数线'
            },
            {
              dataIndex:'total',
              title:'当前总人数'
            },
        ]" :data="data.table" />
      </div>

    </div>
  </div>
</template>

<script>
import tool from '@/utlis/tool'
import config from '@/config'

export default {
  name: '',
  data() {
    return {
      data:{
        currentDisplay:1,
        table:[],
        loading:false,
        showRightMenu:true,
        rightTitle:'菜单',
        provinceTypes:[],
        selectedProvinceName:'',
        selectedProvinceType:undefined,
        selectedProvinceSelectedTypeName:'',
      }
    }
  },

  methods: {
    imported(){
      this.getTable()
    },
    async deleteAllTable(){
      this.data.loading = true
      await tool.axiosPostWithCheckStatus(config.serverURL,'/bg/scoreRank/delete',{
        deleteAll:true,
        province:this.data.selectedProvinceName,
        type:this.data.selectedProvinceSelectedTypeName,
        yearSub:this.data.currentDisplay,
        token:this.bgData.loginedAdminInfo.token
      })
      this.data.loading = false
      this.getTable()
    },
    async deleteCurrentTable(){
      this.data.loading = true
      await tool.axiosPostWithCheckStatus(config.serverURL,'/bg/scoreRank/delete',{
        deleteAll:false,
        province:this.data.selectedProvinceName,
        type:this.data.selectedProvinceSelectedTypeName,
        yearSub:this.data.currentDisplay,
        token:this.bgData.loginedAdminInfo.token
      })
      this.data.loading = false
      this.getTable()
    },
    async getTable(){
      this.data.loading = true
      let re = await tool.axiosPostWithCheckStatus(config.serverURL,'/bg/scoreRank/list',{
        token:this.bgData.loginedAdminInfo.token,
        province:this.data.selectedProvinceName,
        type:this.data.selectedProvinceSelectedTypeName,
        yearSub:this.data.currentDisplay
      })
      this.data.table = re.results
      this.data.loading = false
    },
    selectProvinceChanged(){
      let item = ''
      for(let i=0;i<this.data.provinceTypes.length;i++){
        if(this.data.provinceTypes[i].name==this.data.selectedProvinceName){
          item = this.data.provinceTypes[i]
          break
        }
      }
      this.data.selectedProvinceType = item.type
    },
    async getProvinceTypes(){
      let re = (await tool.axiosPost(config.serverURL ,'/bg/crawler/SRTTypes',{
        token:this.bgData.loginedAdminInfo.token
      }))
      this.data.provinceTypes = re.results
    },
    async deleteYearScoreRankingTable(yearSub){
      this.data.showRightMenu=false
    },
  },

  //生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
  mounted() {
    this.getProvinceTypes()
  },

  props: {
    appData:undefined,
    bgData:undefined
  },

  //监听属性 类似于data概念",
  computed: {},

  //监控data中的数据变化",
  watch: {},

  //生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
  created() {
  },

  //生命周期 - 挂载之前",html模板未渲染
  beforeMount() {
  },

  //生命周期 - 更新之前",数据模型已更新,html模板未更新
  beforeUpdate() {
  },

  // 生命周期 - 销毁之前调用
  beforeDestroy() {
  },

  //生命周期 - 更新之后",数据模型已更新,html模板已更新
  updated() {
  },

  //生命周期 - 销毁完成"
  destroyed() {
  },

  //如果页面有keep-alive缓存功能，这个函数会触发",
  activated() {
  }
}
</script>

<style scoped>

.right-back-button:hover{
  background-color: var(--color-neutral-3);
}

</style>